<template>
	<view class="operation-bar">
		<view class="operation-bar-main">
			<view class="checkbox-part-wrapper">
				<view class="checkbox-wrapper" :class="isAllSelectChecked?'checked':''">
					<checkbox value="cb" :checked="isAllSelectChecked" @click="change" />
				</view>
				<view class="label">
					全选
				</view>
			</view>
			<view class="operation-right">
				<view class="active-count">
					已选<text class="count">{{activeList.length}}</text>台
				</view>
				<view class="btn-wrapper">
					<g-button btn_text="立即下发" :disabled="!activeList.length" @click="clickAllocated" :width="228"
						:height="76" :borderRadius="16"></g-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, Ref, ref, defineEmits, computed, ComputedRef } from 'vue';
	import { IDevice } from '../device-item/types';

	interface IProps {
		deviceList : IDevice[];
		isAllSelectChecked : boolean;

	}


	const props = withDefaults(defineProps<IProps>(), {
		deviceList: () => []
	})

	const activeList : ComputedRef<IDevice[]> = computed(() => {
		return props.deviceList.filter(item => item.active)
	})

	const emit = defineEmits(['changeAllSelect', 'clickAllocated']);

	const change = () => {
		emit('changeAllSelect');
	}

	const clickAllocated = () => {
		emit('clickAllocated',activeList.value);
	}
</script>

<style scoped lang="scss">
	@import "./operationBar.scss";
</style>